<template>
  <div class="aside-menu">
    <el-menu :default-active="$route.path" active-text-color="red" router>
      <el-menu-item v-for="(item,indey) in menuList" :key="indey" :index="item.path">
        <i class="iconfont" :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </el-menu>

    <el-menu active-text-color="black" unique-opened>
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-yinle"></i>
          <span>收藏的歌单</span>
        </template>
        <el-menu-item v-for="(item,index) in collectList" :key="index" @click="songClick(item)">
          <i class="iconfont icon-aireczhinengtuijian"></i>{{item.name}}
        </el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="iconfont icon-yinle"></i>
          <span>创建的歌单</span>
        </template>
        <el-menu-item v-for="(item,index) in createList" :key="index" @click="songClick(item)">
          <i class="iconfont icon-aireczhinengtuijian"></i>{{item.name}}
        </el-menu-item>
      </el-submenu>
    </el-menu>

  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'HomeAsideMenu',
  data() {
    return {
      menuList: [
        {
          icon: 'icon-aireczhinengtuijian',
          title: '个性推荐',
          path: '/home/personalrc'
        },
        {
          icon: 'icon-yinle',
          title: '歌单推荐',
          path: '/home/songrc'
        },
        {
          icon: 'icon-yinle',
          title: '最新音乐',
          path: '/home/newmusic'
        },
        {
          icon: 'icon-MV',
          title: '最新mv',
          path: '/home/newmv'
        },
        {
          icon: 'icon-paihangbang',
          title: '排行榜',
          path: '/home/ranking'
        },
        {
          icon: 'icon-yinle',
          title: '歌手',
          path: '/home/singer'
        }
      ],
      // 收藏
      collectList: [],
      // 创建
      createList: []
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    'userInfo': {
      handler(newVal) {
        console.log(newVal)
        this.collectList = newVal.myList
        this.createList = newVal.subList
      }
    }
  },
  methods: {
    songClick(val) {
      window.sessionStorage.setItem('id', val.id)
      this.$bus.$emit('itemClick', val.id)
      this.$router.push(`/home/detail/${val.id}`)
    },
    handleRefresh() {
      const userInfo = JSON.parse(window.sessionStorage.getItem('vuex')).userInfo
      this.collectList = userInfo.myList
      this.createList = userInfo.subList
    }
  },
  mounted() {
    window.addEventListener('load', (e) => {
      this.handleRefresh()
    })
  }
}
</script>

<style lang="less" scoped>
.aside-menu {
  // padding-bottom: 90px;
  // box-sizing: border-box;
  // 解决侧边栏有垂直方向上的滚动条
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-menu {
    border-right: 0;
    span {
      font-size: 12px !important;
    }
    i {
      margin-right: 5px;
    }
  }
}
</style>